<template>
  <div>
    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="input-box">
        <input type="text" :value="kw">
      </div>
    </div>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表 -->
    <scroll-view class="goods" scroll-y @scrolltolower='reachBottom'>
      <view @click='gotoDetail(item.goods_id)' :key='item.goods_id' v-for='item in list' class="item">
        <!-- 商品图片 -->
        <image class="pic" :src="item.goods_small_logo"></image>
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{item.goods_name}}</view>
          <view class="price">
            <text>￥</text>{{item.goods_price}}<text>.00</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '列表',
        kw: '',
        list: [],
        total: 0,
        pagenum: 1,
        pagesize: 5,
        // 函数节流状态位
        loaded: false
      }
    },
    onLoad(params) {
      this.kw = params.kw
      this.loadListData()
    },
    methods: {
      gotoDetail (id) {
        uni.navigateTo({
          url: '/pages/detail/index?gid=' + id
        })
      },
      reachBottom () {
        // 列表触底时触发：页码加一并且再次调用接口
        this.pagenum += 1
        this.loadListData()
      },
      async loadListData () {
        if (this.list.length >= this.total && this.total !== 0) {
          uni.showToast({
            title: '没有更多数据了'
          })
          return 
        }
        if (this.loaded) {
          return
        }
        this.loaded = true

        // uni.showLoading({
        //   title: '正在加载...',
        //   mask: true
        // });
        const data = await this.$request('goods/search', {
          query: this.kw,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        })
        if (data.meta.status === 200) {
          this.list = [...this.list, ...data.message.goods]
          this.total = data.message.total
        } else {
          uni.showToast(data.meta.msg)
        }
        // uni.hideLoading()
        this.loaded = false
      }
    }
  }
</script>
<style lang="less">
  .search {
    .input-box {
      position: relative;
      background-color: #eee;
      padding: 20rpx;
      input {
        height: 60rpx;
        background-color: #fff;
        padding-left: 40rpx;
      }
      &::before {
        content: '';
        position: absolute;
        width: 32rpx;
        height: 32rpx;
        top: 50%;
        left: 0;
        transform: translate(25rpx, -50%);
        font-size: 24rpx;
        color: #ccc;
        background: url(http://static.botue.com/ugo/images/icon_search%402x.png);
        background-size: 32rpx;
        background-repeat: no-repeat;
      }
    }
  }
  .filter {
    display: flex;
    height: 96rpx;
    line-height: 96rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    z-index: 99;
    text {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #333;
      &.active {
        color: #ea4451;
      }
    }
  }
  .goods {
    position: absolute;
    width: 100%;
    top: 200rpx;
    bottom: 0;
    .item {
      display: flex;
      padding: 30rpx 20rpx 30rpx 0;
      margin-left: 20rpx;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .pic {
        width: 200rpx;
        height: 200rpx;
        margin-right: 30rpx;
      }

      .meta {
        flex: 1;
        font-size: 27rpx;
        color: #333;
        position: relative;
        .name {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .price {
          position: absolute;
          bottom: 0;

          color: #ea4451;
          font-size: 33rpx;

          text {
            font-size: 22rpx;
          }
        }
      }
    }
  }
</style>